import React, { useState } from 'react'
import { Tabs,Checkbox, Button, Input, Toast } from 'antd-mobile'
import img from '../../../public/2.jpg'
import { useNavigate } from 'react-router-dom'
import Rili from '../../components/date/Index'

function Home() {
  
  const navigate=useNavigate()
  let start = localStorage.getItem('start')||''
   let end = localStorage.getItem('end')||''
   console.log(end)
   const date = localStorage.getItem('date')|| ''
   const [flag,setFlag]=useState(false)

   const getDate=()=>{
    setFlag(true)
   }

   const goList=()=>{
    if(start===''||end===''||date===''){
      Toast.show('请选择日期和城市')
      return
    }else{
      navigate(`/list?start=${start}&end=${end}`)
    }
   }
  return (
    <div>
       <Tabs>
          <Tabs.Tab title='火车票' key='fruits'>
            <div className='ticket'>
              <div className='ticket_header'>
                 <h2>北京</h2>
                <img src={img} alt="" style={{width:'30px',height:'30px'}}/>
                <h2>上海</h2>
              </div>
                <div  className='ticket_content'>
                  <h3>1月18日</h3>
                  <span>明天出发</span>
                </div>
                <div  className='ticket_bottom'>
                  <Checkbox>高铁/动车</Checkbox>
                   <Checkbox>学生票</Checkbox>
                </div>
            </div>
            <Button block color='primary' style={{marginTop:'20px'}}>查询火车票</Button>
          </Tabs.Tab>
          <Tabs.Tab title='机票' key='vegetables'>
           <div className='ticket'>
              <div className='ticket_header'>
                 <Input value={start} placeholder='出发城市' onClick={()=>navigate('/city?type=start')}/>
                <img src={img} alt="" style={{width:'30px',height:'30px'}}/>
                 <Input value={end}  placeholder='目的城市' onClick={()=>navigate('/city?type=end')}/>
              </div>
                <div  className='ticket_content'>
                   <Input value={date} placeholder='日期' onClick={()=>getDate()}/>
                 
                </div>
                <div  className='ticket_bottom'>
                  <Checkbox>普通飞机</Checkbox>
                   <Checkbox>高速飞机</Checkbox>
                </div>
            </div>
            <Button block color='primary' style={{marginTop:'20px'}} onClick={goList}>查询机票</Button>
            {
              flag && (
                <Rili ></Rili>
              )
            }
           
          </Tabs.Tab>
          <Tabs.Tab title='汽车票' key='animals'>
            汽车票
          </Tabs.Tab>
          <Tabs.Tab title='酒店' key='jiu'>
            酒店
          </Tabs.Tab>
          <Tabs.Tab title='门票' key='men'>
            门票
          </Tabs.Tab>
        </Tabs>
    </div>
  )
}

export default Home
